<script setup>

import LeftPar from "@/components/Business/leftPar.vue";
import {onMounted, ref} from "vue";

const fixedBox = ref(null);
onMounted(()=> {

  document.onscroll = ()=> {
    //获取滚动条位置
    let s1 = document.documentElement.scrollTop;
    let s2 = document.body.scrollTop;
    let scroll = s1 === 0 ? s2 : s1;
    //获取视口宽度
    let width = document.documentElement.clientWidth;



    // 判断滚动条超过视口宽度的12%时，搜索块变固定定位
    if (scroll > width * 0.5) {
      fixedBox.value.style.position = 'fixed';
      fixedBox.value.style.left = '0';
      fixedBox.value.style.top = '0';
    } else {
      fixedBox.value.style.position = 'static';
    }
  }
})

</script>

<template>
<div class="wrapper">
  <left-par ></left-par>
  <header  ref="fixedBox">
    <div class="header" >
      <h3>
        商家管理页面
      </h3>
    </div>
  </header>
  <router-view style="margin-left: 10vw;position: relative"></router-view>
</div>
</template>

<style scoped>
.wrapper{
  width: 87vw;
  height: 100vw;
}


.wrapper header{
  width: 87vw;
  height: 4vw;
  background-color: #0097FF;
  display: flex;
  border-radius: 1vw;
  align-items: center;
  justify-content: center;
  margin-left: 10vw;
  position: relative;
}
.wrapper header h3 {
  align-content: center;
  justify-content: center;
  font-size: 2vw;
  color: white;
}

</style>
